<template>
  <section class="content">
    <div class="box box-info">
      <div class="box-body">
        <div class="form-horizontal">
          <div class="">
            <div class="form-group">
              <div class="col-sm-3 p-l-0">
                <label for="" class="pull-left control-label">
                  订单编号：
                </label>
                <div class="pull-left">
                  <label for="" class="control-label">{{orderDetail.orderId}}</label>
                </div>
              </div>
              <div class="col-sm-3">
                <label for="" class="pull-left control-label">
                  商品金额：
                </label>
                <div class="pull-left">
                  <label for="" class="control-label">{{orderDetail.price}}</label>
                </div>
              </div>
              <div class="col-sm-3">
                <label for="" class="pull-left control-label">
                  运费：
                </label>
                <div class="pull-left">
                  <label for="" class="control-label">{{orderDetail.shipping}}</label>
                </div>
              </div>
              <div class="col-sm-3">
                <label for="" class="pull-left control-label">
                  订单金额
                </label>
                <div class="pull-left">
                  <label for="" class="control-label">{{orderDetail.total}}</label>
                </div>
              </div>

            </div>
            <div class="form-group">
              <div class="col-sm-3 p-l-0">
                <label for="" class="pull-left control-label">
                  退补类型
                </label>
                <div class="pull-left" style="width: 180px">
                  <select name="" id="" class="form-control">
                    <option value="退">退</option>
                    <option value="退">补</option>
                  </select>
                </div>
              </div>
              <div class="col-sm-3">
                <label for="" class="control-label pull-left">退补金额</label>
                <div class="pull-left"  style="width: 180px">
                  <div class="input-group">
                    <span class="input-group-addon">退</span>
                    <input type="text" class="form-control">
                  </div>
                </div>
              </div>
              <div class="col-sm-3"></div>
              <!--<div class="col-sm-3">
                <label for="" class="pull-left control-label">
                  订单金额
                </label>
                <div class="pull-left">
                  <label for="" class="control-label">370.00</label>
                </div>
              </div>-->
            </div>
            <div class="row">
              <div class="col-md-12">
                <!-- Custom Tabs -->
                <div class="nav-tabs-custom">
                  <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab_1" data-toggle="tab">客户信息</a></li>
                  </ul>
                  <div class="tab-content">
                    <div class="tab-pane active" id="tab_1">
                      <div class="table-responsive">
                        <table class="table no-margin">
                          <tbody>
                          <tr>
                            <td>
                              <label for="" class="control-label"><sup class="text-red">*</sup>客户ID：</label>
                            </td>
                            <td>
                              <input type="text" class="form-control" :value="orderDetail.buyerId">
                            </td>
                            <td>
                              <label for="" class="control-label"><sup class="text-red">*</sup>客户姓名：</label>
                            </td>
                            <td>
                              <input type="text" class="form-control" :value="orderDetail.name">
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <label for="" class="control-label">联系电话1：</label>
                            </td>
                            <td>
                              <input type="text" class="form-control" :value="orderDetail.phone">
                            </td>
                            <td>
                              <label for="" class="control-label">联系电话2：</label>
                            </td>
                            <td>
                              <input type="text" class="form-control">
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <label for="" class="control-label">联系邮箱：</label>
                            </td>
                            <td>
                              <input type="text" class="form-control">
                            </td>
                            <td>
                              <label for="" class="control-label">所属国家：</label>
                            </td>
                            <td>
                              <select name="" class="form-control" v-model="orderDetail.country">
                                <option v-for="country in countryOptions" :value="country.code">{{country.name}}</option>
                              </select>
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <label for="" class="control-label">省/州：</label>
                            </td>
                            <td>
                              <input type="text" class="form-control" v-model="orderDetail.state">
                            </td>
                            <td>
                              <label for="" class="control-label">所属城市：</label>
                            </td>
                            <td>
                              <input type="text" class="form-control" :v-model="orderDetail.city">
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <label for="" class="control-label">邮编：</label>
                            </td>
                            <td>
                              <input type="text" class="form-control" :value="orderDetail.postalCode">
                            </td>
                            <td>
                              <label for="" class="control-label">门牌号：</label>
                            </td>
                            <td>
                              <input type="text" class="form-control">
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <label for="" class="control-label">邮寄地址：</label>
                            </td>
                            <td colspan="3">
                              <input type="text" class="form-control" v-model="orderDetail.street1">
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <label for="" class="control-label">备用地址：</label>
                            </td>
                            <td colspan="3">
                              <input type="text" class="form-control" v-model="orderDetail.street2">
                            </td>
                          </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                    <!-- /.tab-pane -->
                  </div>
                  <!-- /.tab-content -->
                </div>
                <!-- nav-tabs-custom -->
                <div class="bg-gray">
                  <div class="pull-left">
                    <label for="">商品信息</label>
                  </div>
                  <div class="pull-right p-b-20">
                    <button class="btn btn-info">添加库存商品</button>
                  </div>
                </div>
                <table class="table table-bordered">
                  <thead class="bg-info">
                  <tr>
                    <th>平台商品</th>
                    <th style="width: 250px">库存商品</th>
                    <th style="width: 150px;">单价</th>
                    <th style="width: 150px;">数量</th>
                    <th style="width: 180px">发货仓库</th>
                    <th style="width: 150px;">发货数量</th>
                    <th></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="orderItem in orderDetail.items">
                    <td>
                      <img :src="orderItem.image" alt="">
                      <label class="m-l-15">
                        <p>
                          <span>{{orderItem.stock.sku}}</span>
                        </p>
                        <p>
                          <span class="span-over">{{orderItem.title}}</span>
                        </p>
                      </label>
                    </td>
                    <td>
                      <div class="input-group">
                        <input class="form-control" placeholder="" :value="orderItem.stock.sku">
                        <span class="input-group-addon bg-green curren">更换</span>
                      </div>
                      <p class="text-left">
                        {{orderItem.stock.title}}
                      </p>
                    </td>
                    <td>
                      <input type="text" class="form-control" v-model="orderItem.price">
                    </td>
                    <td :class="">
                      <input type="text" class="form-control" v-model="orderItem.quantity">
                    </td>
                    <td>
                      <select class="form-control" >
                        <div>
                          <span v-for="wareHouseOption in orderItem.wareHouseOptions">{{wareHouseOption.whName}}</span>

                        </div>
                        <option :value="wareHouseOption.whId" v-for="wareHouseOption in orderItem.wareHouseOptions" >
                          {{wareHouseOption.whName}}({{wareHouseOption.stockQty}})
                        </option>
                      </select>
                    </td>
                    <td :class="">
                      <input type="text" class="form-control" :value="orderItem.quantity">
                    </td>
                    <td>
                      <a href="javascript:;" class="text-blue">添加库存商品</a>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <!-- /.col -->
          </div>
          <div class="row">
            <div class="margin text-center">
              <a class="btn btn-info m-r-10">保存</a>
              <a class="btn btn-info">返回</a>
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>
</template>

<script>
  import orderDetail from '@/js/order/orderDetail'

  export default orderDetail
  // {
  //   mixins: [orderDetail]
  // }
</script>

<style scoped>

</style>
